重新認識 Vue.js Day06：樣板渲染

2023 iThome 鐵人賽

DAY 6

Vue.js

重新認識 Vue.js系列第 6 篇

15th鐵人賽

呆呆小將

2023-09-06 18:19:27

309 瀏覽

分享至

昨天打完文章有點茫然了，竟然忘記這個還沒講，讓我們今天先補上吧

Vue 是怎麼切換畫面組的？

首先我們要先建立一個基本觀念就是 Vue 是透過模組切換來達成不同畫面組的呈現，與傳統網頁開發不同，傳統網頁是透過整個 html 檔案切換。
因此，我們首先要知道的是 Vue 的不同模組要怎麼建立，並且加入到 Vue 實體當中

Vue 的 render 函式

首先，我們先從一個空的網頁開始，並且將 Vue 實體掛載到一個元素上面

<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
        }).$mount("#app")
    </script>
</body>

之後我們就可以介紹 render 函式的使用方法啦
render 函式的使用方法推薦是丟給他一個物件，那每一個物件代表德就是一個畫面組，差別在於說 html 結構打算怎麼呈現
這邊基本上有兩種方式，分別為 template 與 createElement，

const templateApp = {
    template: `
        <div>Hello <span>{{user}}</span></div>
        <div>Time: {{time}}</div>
    `,
    data(){
        return {
            user: 'leo',
            time: '2023-09-06'
        }
    }
}
let vm = new Vue({
    el: '#app',
    render: render => render(templateApp)
})

同時等價於

const CEApp = {
  render(createElement) {
    return createElement('div', [
      createElement('div', 'Hello ', [
        createElement('span', this.user)
      ]),
      createElement('div', 'Time: ', this.time)
    ]);
  },
  data() {
    return {
      user: 'leo',
      time: '2023-09-06'
    };
  }
};
let vm = new Vue({
    el: '#app',
    render: render => render(CEApp)
})

這兩種寫法各有好處，使用 template 的好處是比較直觀，若畫面的複雜性較小這樣就夠了，但若是要複雜化的結構~~我也不確定要多複雜，反正我還沒用過~~可以考慮使用 createElement 建立 VDOM 會擁有較高的彈性

除此之外，我們還可以在模組裡面塞要設定的 CSS

const templateApp = {
    template: `
        <div>Hello <span class="user">{{user}}</span></div>
        <div>Time: {{time}}</div>
    `,
    data(){
        return {
            user: 'leo',
            time: '2023-09-06'
        }
    },
    style: `
        .user {
            color: red;
        }
    `
}

這樣我們的樣板就渲染啦~當然，其實也可以存放在 DOM 上面，然後直接讓 Vue 掃一遍加入偵測機制就是，不過後續若有用像是 Vue-cli 或是 vite 之類的開發工具就沒這些問題了，今天的內容就到此結束，讓我們明天再見啦